<template>

  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body :close-on-click-modal="false" v-dialogDrag>


    <el-table border v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" ref="table"
              :max-height="tableMaxHeight" show-summary :summary-method="getSummaries">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" label="序号" type="index" width="50">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column sortable label="订单编号" align="center" prop="projectNo" show-overflow-tooltip />
      <!--<el-table-column label="产品编码" align="center" prop="code" />-->
      <el-table-column sortable align="center"  label="产品编码" prop="code">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="showDetailGongxu(scope.row)" style="color: #00afff;cursor:pointer;">
              {{scope.row.code}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" align="center" prop="name" />
      <!--<el-table-column label="产品型号" align="center" prop="xinghao" />-->
      <el-table-column sortable align="center"  label="产品型号" prop="xinghao">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="shengchanDoGoodsSale(scope.row)" style="color: #00afff;cursor:pointer;">
              {{scope.row.xinghao}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="产品数量" align="center" prop="count" />
      <el-table-column label="生产完成" align="center" prop="finishdoCount" />
      <el-table-column label="入库数量" align="center" prop="rukuCount" />
      <el-table-column sortable label="产品类型" align="center" prop="type">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.prod_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column sortable label="产品状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.prodsale_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column sortable label="工序状态" align="center" prop="issheding">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.task_status" :value="scope.row.issheding" />
        </template>
      </el-table-column>
      <el-table-column sortable label="拆解状态" align="center" prop="ischaijie">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.pro_chaijie_gongxu" :value="scope.row.ischaijie" />
        </template>
      </el-table-column>
      <el-table-column label="需求日期" align="center" prop="saleDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.saleDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="产品描述" align="center" prop="miaoshu" show-overflow-tooltip />
      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button @click="yongliaoMingxi(scope.row)" size="mini" type="text" icon="el-icon-document">
            用料明细
          </el-button>
          <el-button @click="shengchanDoGoodsSale(scope.row)" icon="el-icon-setting" size="mini" type="text">
            生产过程
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <shengchanDoGongxu-form @ok="getList" ref="shengchanDoGongxuForm"></shengchanDoGongxu-form>
    <yongliaoMingxi-form-list ref="yongliaoMingxiForm" @ok="getList"></yongliaoMingxi-form-list>
    <shengchanDoGoodsSale-form @ok="getList" ref="shengchanDoGoodsSaleForm"></shengchanDoGoodsSale-form>
    <shengchanDoGongxuUser-form @ok="getList" ref="shengchanDoGongxuUserForm"></shengchanDoGongxuUser-form>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
  </el-dialog>
</template>

<script>
  import {
    deleteAction,
    getAction
  } from '@/api/manage'
  import ShengchanDoGongxuUserForm from '@/views/develop/goodsSale/module/ShengchanDoGongxuUserForm.vue';
  import YongliaoMingxiFormList from '@/views/develop/goodsSaleMaterial/module/YongliaoMingxiFormList'
  import ShengchanDoGoodsSaleForm from '@/views/develop/goodsSale/module/ShengchanDoGoodsSaleForm.vue';
  import ShengchanDoGongxuForm from '@/views/develop/goodsSale/module/ShengchanDoGongxuForm.vue';

  export default {
    name: "ShowPuduceSaleAllForm",
    dicts: ['prodsale_status', 'pro_chaijie_gongxu', 'prod_type','task_status'],
    components: {
      ShengchanDoGongxuUserForm,
      YongliaoMingxiFormList,
      ShengchanDoGoodsSaleForm,
      ShengchanDoGongxuForm,
    },
    data() {
      return {
        title: '',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 销售产品物料选用明细表格数据
        dataList: [],
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          params: {},
          id: null,
          code: null,
          name: null,
          shuoming: null,
          produceNo: null,
          projectNo: null,
          gongchengName: null,
          goodsName: null,
          goodsCode: null,
          goodModel: null,
          gongxuName:null,
          gongxuModel:null,
          model: null,
          brand: null,
          status: null,
          remark: null,
          projectId: null,
          updateBy: null,
          deptName: null,
          //deptId: this.$store.getters.deptId,
          //deptName: this.$store.getters.deptName,
          orderByColumn: "create_time",
          isAsc: "desc",
        },
        url: {
          list: '/factoryProduceSaleAll/factoryProduceSaleAll/listByChild',
        },
        tableMaxHeight: window.innerHeight - 320,
      };
    },
    created() {
      window.addEventListener('resize', this.getTableHeight);
    },
    destroyed() {
      window.removeEventListener('resize', this.getTableHeight)
    },
    methods: {
      showDetailGongxu(row){
        this.$refs.shengchanDoGongxuForm.show(row);
      },
      shengchanDoGoodsSale(row) {
        this.$refs.shengchanDoGoodsSaleForm.show(row);
      },
      yongliaoMingxi(row) {
        this.$refs.yongliaoMingxiForm.show(row);
      },
      showDetailGongxuUser(row){
        this.$refs.shengchanDoGongxuUserForm.show(row);
      },
      show(row) {
        this.open = true;
        this.title = "产品查看";
        this.queryParams.saleId = row.id;
        this.getList();
      },
      /** 查询销售产品物料选用明细列表 */
      getList() {
        this.loading = true;
        getAction(this.url.list, this.queryParams).then(response => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getTableHeight() {
        this.tableHeight = window.innerHeight - 320
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
    }
  };
</script>
